<template lang="html">
  <div class="">
    <div class="coupon_item" >
         <div class="coupon_info">
         <div class="coupon_info_img">
           <img :src="item.voucher_image" class="cpupon_img" alt=""/>
         </div>
             <div class="coupon_info_txt">
               <div class="coupon_title">{{item.activity_name}}</div>
               <div class="coupon_time">有效期：{{item.period_validity}}</div>
               <div class="dis_money">
                 <div class="coupon_money">{{item.voucher_price_show}}</div>
                 <div v-if="item.voucher_subtotal === null"></div>
                 <div v-else class="coupon_condition">{{item.voucher_subtotal}}</div>
               </div>
             </div>
           </div>
           <div class="coupon_hr"></div>
           <div class="coupon_rule">使用规则：{{item.activity_remark}}
             <div :class="is_show ? 'down_icon show' : 'down_icon'" @click="showRule"></div>
           </div>
           <slot name="radio"></slot>
        </div>
      <div class="show_coupon_rule" v-if="is_show">{{item.activity_remark}}</div>
  </div>
</template>

<script>

export default {
  props: {
    item: {
      type: Object,
      value: {}
    }
  },
  data () {
    return {
      is_show: false
    }
  },
  created () {
  },
  methods: {
    showRule () {
      this.is_show = !this.is_show
    }
  }
}
</script>
<style lang="scss" scoped>
.coupon_item {
  height: 128px;
  background: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon_center/item_bg.png') center no-repeat;
  background-size: 100%;
  position: relative;
  margin: 10px;
}
.down_icon {
  position: absolute;
  height: 25px;
  width: 25px;
  background: url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_down.png') no-repeat center;
  background-size: 12px;
  top: -2px;
  right: 0;
  background-position: center;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
}

.show {
  animation: rotating 0.6s;
  transform: rotate(180deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.show_coupon_rule {
  font-size: 12px;
  color: #666;
  background: #fff;
  padding: 8px 5px;
  margin: 2px 10px 0 10px;

}
.coupon_info {
  width: 175px;
  margin: 0 0 0 5px;
  padding: 8px 0 9px 85px;
  position: relative;
}

.coupon_item .coupon_info .coupon_info_img {
  display: table;
  position: absolute;
  top: 8px;
  left: 5px;
}

.coupon_item .coupon_info .coupon_info_img .cpupon_img {
  width: 75px;
  height: 75px;
}

.coupon_info_txt {
  display: table;
}
.radio{
  width:22px;
  height:22px;
}
.coupon-radio{padding:40px 0 40px 40px!important;margin:12px 0!important}
.coupon_info_txt .coupon_title {
  font-size: 15px;
  color: #333;
  margin-top: 4px;
  height: 21px;
  font-weight: 400;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.coupon_info_txt .coupon_time {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  margin-top: 3px;
}

.coupon_info_txt .dis_money {
  height: 22px;
  font-size: 14px;
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.dis_money .coupon_money {
  font-size: 14px;
  color: #e91f3f;
  height: 22px;
  line-height: 22px;
}

.dis_money .coupon_condition {
  height: 22px;
  background: rgba(233, 31, 63, 0.08);
  font-size: 11px;
  padding: 0 5px;
  line-height: 22px;
  color: #e91f3f;
  margin-left: 4px;
}

.coupon_hr {
  width: 232px;
  height: 2px;
  background: #f7f7f7;
  margin-left: 6px;
}

.coupon_rule {
  font-size: 12px;
  color: #666;
  margin: 9px 5px;
  height: 17px;
  line-height: 17px;
  width: 230px;
  padding-right: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  position: relative;
}

.coupon_stats {
  /* background: red; */
  width: 89px;
  height: 128px;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
